<template>
  <div class="qtlogin">
    <div class="qtlogin_main">
      <!-- 登录页面主体开始 -->
      <div class="qtlogin_content">
        <!-- logo图 -->
        <div class="qtlogin_logo">
          <img src="../assets/images/login/form_logo.png" alt>
        </div>
        <!-- 系统名 -->
        <p class="qtlogin_systemName">欢迎使用快时资产管理系统</p>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" status-icon>
          <el-form-item prop="name">
             <span class="iconfont icon-yonghuming nameifont"></span>
            <el-input v-model="ruleForm.name" placeholder="用户名" id="qtname" autofocus autocomplete="on" ></el-input>
          </el-form-item>
          <el-form-item prop="password">
             <span class="iconfont icon-mima passwordifont"></span>
            <el-input v-model="ruleForm.password" type="password" placeholder="密码" id="qtpassword"  @change='qtLogin'></el-input>
          </el-form-item>
          <el-form-item>
           <el-button round id="qtloginbtn" @click.enter='qtLogin'>登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin } from '@/api/index.js'
export default {
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value.trim()) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value.trim()) {
        return callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        password: ''
      },
      rules: {
        name: [{ required: true, validator: checkUsername, trigger: 'blur' }],
        password: [{ required: true, validator: checkPassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    qtLogin () {
      // 点击登录按钮，通过ref获取到到当前表单的dom元素并使用elementui中的validate方法对整个表单进行校验
      this.$refs.ruleForm.validate(isLogin => {
        if (isLogin) {
          // this.$message.success('登录成功')
          userLogin({ username: this.ruleForm.name, password: this.ruleForm.password })
            .then(res => {
              console.log(res)
              if (res.data.code === 200) {
                let localdata = res.data.nickname
                localStorage.setItem('loginCode', JSON.stringify(localdata))
                this.$message.success(res.data.msg)
                this.$router.push({ name: 'home' })
              } else {
                this.$message.error(res.data.msg)
              }
            })
        } else {
          this.$message.error('请输入用户名和密码')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.el-form-item__content  #qtloginbtn {
    height: 45px;
    width: 100%;
    font-size: 18px;
    background-color: rgba(0,0,0,.4);
    color: #fff;
}
.el-button {
    border-color:#fff;
}
.el-button:active {
    border-color:#fff;
    outline: none;
}
.el-form-item__content {
    position: relative;
    .nameifont,
    .passwordifont {
        position: absolute;
        display: inline-block;
        width: 50px;
        border-right: 2px solid #ccc;
        text-align: center;
        top:10px;
        left: 0;
        height: 30px;
        z-index: 999;
        line-height: 30px;
        font-size: 18px;
    }
}
.qtlogin {
  height: 100%;
  .qtlogin_main {
    width: 100%;
    height: 100%;
    background-color: pink;
    background: url("../assets/images/login/bg.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .qtlogin_content {
      width: 400px;
      height: 600px;
      // background-color: pink;
      margin: 130px auto;
      .qtlogin_logo {
        text-align: center;
      }
      .qtlogin_systemName {
        margin: 20px 0;
        text-align: center;
        color: #fff;
      }
    }
  }
}

</style>
